<template>
  <transition name="dis">
    <div id="select-dis">
      <div class="select-title"><span @click="hideDisSelect()"><svg viewBox="0 0 20 32" id="arrow-left.6f6409e" width="100%" height="100%"><path fill="#fff" d="M16.552 5.633L14.508 3.59 2.243 15.853 14.508 28.41l2.044-2.043-10.22-10.513z"></path></svg></span><h1>选择地址</h1></div>
      <div class="search-dis">
        <div class="search-btn"><input type="text" placeholder="请输入地址" v-model="district"></div>
      </div>
      <ul class="dis-list">
        <li v-for="(item,index) in disList" :key="index" @click="setDistrict(item.name)">
          <h2>{{item.name}}</h2>
          <p>{{item.address}}</p>
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'selectdis',
  data: function () {
    return {
      district: ''
    }
  },
  computed: {
    ...mapState(['disList'])
  },
  methods: {
    setDistrict: function (str) {
      this.hideDisSelect()
      return this.$store.commit('SETDISTRICT', str)
    },
    ...mapMutations({
      hideDisSelect: 'HIDEDISSELECT',
      getDisList: 'GETDISLIST'
    })
  },
  mounted: function () {

  },
  watch: {
    district: function (newVal, oldVal) {
      // var that = this
      console.log('变化')
      // setTimeout(function () {
      this.getDisList({
        keyword: encodeURI(newVal),
        latitude: sessionStorage.latitude,
        longitude: sessionStorage.longitude
      })
      // }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
#select-dis{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  .select-title{

    width: 100%;
    height: px2rem(88);
    background-image: linear-gradient(90deg,#0af,#0085ff);
    h1 {
      position: absolute;
      top: px2rem(20);
      left: px2rem(310);
      color: #fff;
      font-size: px2rem(36);
    }
    svg{
      margin-left: px2rem(28);
      width: px2rem(28);
      fill: #fff;
    }
  }
  .search-dis{
    width: 100%;
    height: px2rem(88);
    background-image: linear-gradient(90deg, #0af, #0085ff);
    padding:0 px2rem(40);
    overflow: hidden;
    .search-btn {
      input {
        display: block;
        width: 100%;
        height: px2rem(55);
        margin: px2rem(15) 0;
        border:none;
        outline: none;
        border-radius: px2rem(36);
        text-align: left;
        padding: 0 px2rem(30);
        line-height: px2rem(55);
        font-size: px2rem(26);
        color: #333;
        box-shadow: 0 0.026667rem 0.066667rem 0 rgba(0,0,0,.2);
      }
    }
  }
  .dis-list{
    li{
      padding: px2rem(20) px2rem(25);
      border-bottom: 1px solid #ccc;
      background: #fff;
      h2{
        font-size: px2rem(28);
        font-weight: 700;
      }
      p{
        font-size: px2rem(24);
        color: #999;
      }
    }
  }
}
.dis-enter-active{
  animation: dis-in .5s
}
.dis-leave-active{
  animation: dis-out .5s
}

@keyframes dis-in {
  0%{
    left: px2rem(750);
  }
  100%{
    left: 0;
  }
}
@keyframes dis-out {
  0%{
    left: 0;
  }
  100%{
    left: px2rem(750);
  }
}
</style>
